<template>
  <div class="c-fs34 c-wb-ba">
    <audio id="audio" @ended="playAudioEnd" class="c-pf c-p-l-100"></audio>
    <div v-if="questionInfo&&questionInfo.type==1 || questionInfo.type==2 || questionInfo.type==4">
      <div v-for="(item,index) in optionsList" :key="index" :class="questionInfo.answers&&optionRightArr[index]==item.type&&userAnswer?'isRightBg':
        optionClass[index]=='choose'&&questionInfo.answers&&optionRightArr[index]!=item.type&&userAnswer?'isWrongBg':''"
        class="c-ph24 c-flex-row c-pv30 c-fs26 c-br16 c-bg-sblack c-mt20 c-bg-sgray">
        <div class="c-mr20 c-mt4"  :class="questionInfo.answers&&optionRightArr[index]==item.type&&userAnswer?'isRight':
          optionClass[index]=='choose'&&questionInfo.answers&&optionRightArr[index]!=item.type&&userAnswer?'isWrong':''">{{item.type}}</div>
        <div class="c-wb-ba copyNot imgInlineb c-textAlign-j problemdDom"
          :class="optionRightArr[index]==item.type&&userAnswer?'isRight':
            optionClass[index]=='choose'&&questionInfo.answers&&optionRightArr[index]!=item.type&&userAnswer?'isWrong':''" v-html="item.name"></div>
      </div>
      <div v-if="userAnswer" class="c-ph24 c-pv30 c-fs26 c-br16 c-fc-xblack c-mt20 c-bg-sgray">
        <div class="c-fs28 c-fw600" :class="userAnswer.isRight==1?'isRight':'isWrong'">{{ userAnswer.isRight==1?'回答正确':'回答错误' }}</div>
        <div class="c-mt20 c-fc-sblack">正确答案：<span class="c-fc-xblack">{{questionInfo.answer}}</span></div>
        <div class="c-mt20 c-fc-sblack">我的答案：<span class="c-fc-xblack">{{userAnswer.answer?userAnswer.answer:'无'}}</span></div>
        <answerAncy :questionInfo="questionInfo" :number="number"></answerAncy>
      </div>
    </div>
    <div v-if="questionInfo.type==5">
      <div v-if="fbAnswer.length!=0" class="c-ph24 c-flex-row c-pv30 c-fs26 c-br16 c-fc-xblack c-mt20 c-bg-sgray" v-for="(item,index) in fbAnswer" :key="index"
        :class="fbAnswerStyle[index] == 'right' ? 'isRightBg isRight' : fbAnswerStyle[index] == 'wrong' ? 'isWrong isWrongBg' : ''">
        <div class="c-mr20 c-mt4">{{index + 1}}</div>
        <div class="c-flex-grow1 c-mr10">
          <div :class="fbAnswerStyle[index] == 'right' ? 'isRight' : fbAnswerStyle[index] == 'wrong' ? 'isWrong' : ''">{{ userAnswer?userAnswer.answer[index].value:'' }}</div>
        </div>
        <!-- <iptBlanks :fbAnswerStyle='fbAnswerStyle[index]' :isDisabled="'true'" :index="index" :fillVal="userAnswer?userAnswer.answer[index].value:''"></iptBlanks> -->
      </div>
      <div class="c-ph24 c-flex-row c-pv30 c-fs26 c-br16 c-fc-xblack c-mt20 c-bg-sgray" v-else>无</div>
      <div v-if="userAnswer" class="c-ph24 c-pv30 c-fs26 c-br16 c-fc-xblack c-mt20 c-bg-sgray">
        <div class="c-fs28 c-fw600" :class="userAnswer.isRight==1?'isRight':'isWrong'">{{ userAnswer.isRight==1?'回答正确':'回答错误' }}</div>
        <div class="c-mt20">
          <div class="c-fc-sblack">正确答案：</div>
          <div class="c-mt8" v-for="(item,index) in questionInfo.answer" :key="index">({{(index+1)}}) {{item.value}}</div>
        </div>
        <answerAncy :questionInfo="questionInfo" :number="number"></answerAncy>
      </div>
    </div>
    <div v-if="questionInfo.type==3&&userAnswer" class="c-mt24">
      <div class="c-fs28 c-fc-sblack">
        <div>我的答案：</div>
      </div>
      <div class="c-bg-white c-br20 c-mt10">
        <div class="c-fs24">
          <!-- 文本回答 -->
          <div v-if="userAnswer.answer" :class="
            showMore && showDescAnswer ? '' : 'c-maxh150 c-text-hidden maxMask'">
            <div class="c-p c-lh42 c-pl10" id="textAnswer" ref="textAnswer" >
              <div class="c-ww-bw c-lh42" v-if="userAnswer.answer!=''">
                <div v-for="(cItem,cIndex) in userAnswer.answer.split('\n')" :key="cIndex">{{ cItem }}</div>
              </div>
              <div class="c-ww-bw c-lh42" v-else>无</div>
            </div>
          </div>
          <div class="c-flex-row c-justify-end c-w100" v-if="userAnswer.answer">
            <div @click.stop="clickShowMore" v-if="showDescAnswer" class="theme-fc c-fs20">{{showMore ? '收起':'展开'}}</div>
          </div>
          <div :class="{'c-mt20': userAnswer.answer}">
            <div class="c-flex-row c-flexw-wrap">
              <!-- 语音回答 -->
              <div @click.stop="clickPlayAudio(item.url)" v-for="(item,index) in userAnswer.audioArr" :key="index"
                class="c-ww166 c-hh60 c-br30 theme-bg-10 c-pl24 c-pr10 c-flex-row c-p c-flex-row c-aligni-center c-mb20" :class="(index+1)%3==0?'':'c-mr22'">
                <div class="box c-ww32">
                  <div class="wifi-symbol">
                    <div class="wifi-circle first theme-bd2"></div>
                    <div class="wifi-circle second theme-bd2" :class="playAduioSrc != item.url?'':'seconAnimation'"></div>
                    <div class="wifi-circle third theme-bd2" :class="playAduioSrc != item.url?'':'thirdAnimation'"></div>
                  </div>
                </div>
                <div class="c-fs20 theme-fc">{{changeTimeStr(item.time)}}</div>
              </div>
            </div>
            <div class="c-flex-row c-flexw-wrap">
              <!-- 视频回答 -->
              <div @click.stop="clickShowVideo(item.realUrl)" class="c-p c-ww166 c-hh100 c-mb20" :class="(index+1)%3==0?'':'c-mr22'" v-for="(item,index) in userAnswer.videoArr" :key="index">
                <img class="c-w100 c-h c-br20" :src="$addXossFilter(item.videoCover, 'https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/video-bg4.png')" alt="" />
                <div v-if="item.videoCover" class="img-play-btn c-br20">
                  <i class="iconfont c-fs40 c-fc-white">&#xe869;</i>
                </div>
              </div>
            </div>
            <!-- 图片回答 -->
            <div class="c-flex-row c-flexw-wrap">
              <div class="c-ww166 c-hh166 c-mb20 c-p" :class="(index+1)%3==0?'':'c-mr22'" v-for="(item,index) in userAnswer.imgArr" :key="index">
                <img @click.stop="clickPreviewImage(item.url, userAnswer.imgArr)" class="c-w100 c-br20 c-ww166 c-hh166" :src="$addXossFilter(item.url)" alt="" />
              </div>
            </div>
          </div>
        </div>
        <div class="c-pb20" v-if="comments">
          <div class="c-bg-sgray c-br20 c-ph14 c-pb10">
            <div class="c-flex-row c-aligni-center c-justify-sb c-ph10">
              <div class="c-fs28 c-fc-xblack c-fw600">老师点评</div>
              <div class="iconfont c-fs80 theme-fc">&#xe7cb;</div>
            </div>
            <div class="c-fs24">
              <!-- 文本回答 -->
              <div v-if="comments.comments">
                <div class="c-p c-lh42 c-pl10">
                  <div class="c-ww-bw c-lh42" v-for="(cItem,cIndex) in comments.comments.split('\n')" :key="cIndex">{{cItem}}</div>
                </div>
              </div>
              <div :class="{'c-mt20': comments.comments}">
                <div class="c-flex-row c-flexw-wrap">
                  <!-- 语音回答 -->
                  <div @click.stop="clickPlayAudio(item.url)" v-for="(item,index) in comments.audioArr" :key="index"
                    class="c-ww150 c-hh60 c-br30 theme-bg-10 c-pl24 c-pr10 c-flex-row c-p c-flex-row c-aligni-center c-mb20 c-mh10">
                    <div class="box c-ww32">
                      <div class="wifi-symbol">
                        <div class="wifi-circle first theme-bd2"></div>
                        <div class="wifi-circle second theme-bd2" :class="playAduioSrc != item.url?'':'seconAnimation'"></div>
                        <div class="wifi-circle third theme-bd2" :class="playAduioSrc != item.url?'':'thirdAnimation'"></div>
                      </div>
                    </div>
                    <div class="c-fs20 theme-fc">{{changeTimeStr(item.time)}}</div>
                  </div>
                </div>
                <span v-if="comments.imgArr&&comments.imgArr.length" @click.stop="clickPreviewImage(comments.imgArr[0].url,comments.imgArr)" class="c-fs20 theme-fc c-mh10 c-inlineblack c-mb16">点击查看图片</span>
                <span v-if="comments.videoArr && comments.videoArr.length" v-for="(item,index) in comments.videoArr" :key="index" @click.stop="clickShowVideo(item.videoMp4,item.videoM3u8)" class="c-fs20 theme-fc c-mh10 c-inlineblack c-mb16">点击查看视频</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <answerAncy :questionInfo="questionInfo" :number="number"></answerAncy>
    </div>
    <div v-else-if="questionInfo.type==3&&isAncy==0" class="c-bg-sgray c-br20  c-mt20 c-ph24 c-pv24">
      <div class="c-fs28 c-fc-xblack c-fw600">
        我的答案
      </div>
      <!-- 文字回答 -->
      <div class="modal-textarea c-bd-b1 c-pb20 c-mb24">
        <textarea disabled v-model="answerText" maxlength="10000" class="needsclick c-lh40" placeholder="请输入答案内容"></textarea>
        <div class="c-w100 c-lh c-pt10 c-pb24 c-textAlign-r c-fs18  c-fc-sgray">{{answerText.length}}/10000</div>
      </div>
      <!-- 语音回答 -->
      <div class="c-flex-row c-flexw-wrap" v-if="uploadAudioList.length > 0">
        <div @click.stop="clickPlayAudio(item.url)" v-for="(item,index) in uploadAudioList" :key="index" class="c-ww160 c-hh60 c-br30 theme-bg-10 c-pl24 c-pr10 c-p c-flex-row c-aligni-center c-mb20 c-mh10">
          <div class="box c-ww32">
            <div class="wifi-symbol">
              <div class="wifi-circle first theme-bd2"></div>
              <div class="wifi-circle second theme-bd2" :class="playAduioSrc == item.url?'seconAnimation':''"></div>
              <div class="wifi-circle third theme-bd2" :class="playAduioSrc == item.url?'thirdAnimation':''"></div>
            </div>
          </div>
          <div class="c-fs20 theme-fc">{{changeTimeStr(item.time)}}</div>
        </div>
      </div>
      <!-- 图片回答 -->
      <div class="c-flexw-wrap c-flex-row" v-if="uploadImgList.length > 0">
        <div v-for="(item,index) in uploadImgList" :key="index" class="c-ww160 c-hh160 c-mb20 c-mh10 c-flex-row c-flex-center c-p " :class="index % 3 == 0 ? '':'c-ml12'">
          <img @click="clickPreviewImage(item.content,uploadImgList)" class="c-ww160 c-hh160 c-br20" :src="$addXossFilter(item.url)" alt="" />
        </div>
      </div>
      <!-- 选择回答类型 -->
      <div class="c-flex-row c-justify-sb">
        <div class="c-flex-row c-fc-sblack">
          <div class="c-mr60">
            <i class="iconfont c-fs32">&#xe75b;</i>
          </div>
          <div class="c-p c-mr60">
            <div class="c-w100">
              <i class="iconfont c-fs32">&#xe75e;</i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { utilJs, wxUtilJs } from "@/utils/common.js";
import answerAncy from "@/components/templates/schoolAssignment/answerAncy.vue";
let ancyplayTimeControl = null;
export default {
  name: "singleProblem",
  components: {
   answerAncy
  },
  props: {
    questionInfo: {
      type: Object,
      default: null
    },
    allNumber: {
      type: Number,
      default: 0
    },
    number: {
      type: Number,
      default: 0
    },
    isAncy: {
      type: Number,
      default: 0
    },
    userAnswer: {
      type: Object,
      default: null
    },
    comments: {
      type: Object,
      default: null
    },
  },
  data() {
    return {
      optionClass: [],
      optionsList:[],
      fbAnswer:[],
      answerText:'',
      uploadAudioList:[],
      uploadVideoList:[],
      uploadImgList:[],
      playAduioSrc:'',
      answerList: [false, false, false, false, false, false, false, false, false, false],
      showVideo:false,
      currentVideoObj:{},
      ancyshowLoudspeaker: false,
      ancydragFlag: false, //进度拖拽
      ancyaudioPlayTime:0,
      ancyplaytime: '00:00:00',
      ancyplaytotalTime: '00:00:00',
      ancyduration:0,
      ancyPlaying:false,
      fbAnswerStyle:[],
      showDescAnswer:false,
      showMore:false,
      optionRightArr:null
    };
  },
  watch: {
  },
  mounted() {
    this.optionClass = ['noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose'];
    this.showOption(),
    this.ancyshowLoudspeaker = false
    this.ancyaudioPlayTime = 0
    clearInterval(ancyplayTimeControl);
  },
  computed: {
  },
  destroyed() {
    this.answerText = ''
    this.uploadAudioList = []
    this.uploadVideoList = []
    this.uploadImgList = []
    this.optionClass = ['noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose'];

    this.ancyshowLoudspeaker = false
    this.ancyaudioPlayTime = 0
    clearInterval(ancyplayTimeControl);
  },
  methods: {
    //监听音频播放结束执行的内容
    playAudioEnd() {
      this.playAduioSrc = "";
      document.getElementById("audio").src = this.playAduioSrc;
    },
    //点击关闭视频
    clickCloseVideo() {
      if (this.showVideo) {
        this.showVideo = false;
      }
    },
    clickShowVideo(videoMp4, videoM3u8) {
      this.$emit('clickShowVideo', videoMp4, videoM3u8)
    },
    clickPreviewImage(imgUrl, imgArrList) {
      console.log(123123123)
      if (!imgUrl) {
        return;
      }
      let imgArr = [];
      for (let key of imgArrList) {
        let imgItemUrl = key.content || key.url;
        imgArr.push(imgItemUrl);
      }
      let imgData = {
        current: imgUrl, // 当前显示图片的http链接
        urls: imgArr
      }
      wxUtilJs.previewImage(imgData)
      // wxUtilJs.previewImage({
      //   current: imgUrl, // 当前显示图片的http链接
      //   urls: imgArr // 需要预览的图片http链接列表
      // });
    },
    //时间转换成"形式
    changeTimeStr(timeStr) {
      return utilJs.timeTmpToNsTime(timeStr)
    },
    //点击开始播放音频
    clickPlayAudio(audioUrl) {
      let audio = document.getElementById("audio");
      if (this.playAduioSrc == audioUrl) {
        this.playAduioSrc = "";
        document.getElementById("audio").src = this.playAduioSrc;
        return;
      }
      this.playAduioSrc = audioUrl;

      //返回mp3则用audio播放
      if (this.playAduioSrc && this.playAduioSrc.includes("http")) {
        document.getElementById("audio").src = this.playAduioSrc;
        audio.play();
      }
    },
    showMoreQue() {
      this.moreQue = !this.moreQue
    },
    showOption() {
      let $this = this
      if ($this.questionInfo && $this.questionInfo.type == 4) {
        $this.questionInfo.optionA = "正确";
        $this.questionInfo.optionB = "错误";
      }
      if ($this.questionInfo && ($this.questionInfo.type == 1 || $this.questionInfo.type == 2 || $this.questionInfo.type == 4)) {
          const optionArr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
          for (let i = 0; i < 10; i++) {
            let optionSty = `option${optionArr[i]}`;
            if ($this.questionInfo[optionSty] != '' && $this.questionInfo[optionSty] != null) {
              $this.optionsList.push({ type: optionArr[i], name: $this.questionInfo[optionSty] });
            }
          }
          if (this.questionInfo && this.questionInfo.type == 4) {
              let answersDate = []
              if (this.questionInfo.answer == 1) {
                answersDate.push('A')
              } else {
                answersDate.push('B')
              }
              this.questionInfo.answers = answersDate
          }
          let optionRightArr = ['', '', '', '', '', '', '', '', '', ''];
          for (let i = 0; i < 10; i++) {
            for (let j = 0; j < $this.questionInfo.answers.length; j++) {
              if ($this.questionInfo.answers[j] == optionArr[i]) {
                $this.$set(optionRightArr, i, $this.questionInfo.answers[j]);
              }
            }
          }
          this.optionRightArr = optionRightArr
      }
      if ($this.questionInfo && $this.questionInfo.type == 5) { //填空题
        $this.clickShow = true
        let _obj = JSON.stringify($this.questionInfo.answer); //深拷贝出来处理，不影响原数据
        $this.fbAnswer = JSON.parse(_obj);
        $this.fbAnswer.forEach(item => {
          item.value = "";
        })
      }
      if ($this.questionInfo && $this.questionInfo.type == 3 && this.userAnswer) {
        console.log(this.userAnswer, '4444444444444444444444')
        this.answerText = this.userAnswer.answer || ''
        this.uploadAudioList = this.userAnswer.audioArr || []
        this.uploadVideoList = this.userAnswer.videoArr || []
        this.uploadImgList = this.userAnswer.imgArr || []
      }
      console.log($this.optionsList)
      if (this.userAnswer) {
        this.clickAnswer()
        this.$nextTick(() => {
          //获取当前内容的行高，超过3行则显示更多
            if (!!this.$refs.textAnswer && this.$refs.textAnswer.offsetHeight < 120) {
                this.showDescAnswer = false
              } else {
                this.showDescAnswer = true
              }
          })
      }
    },
    clickShowMore() {
      this.showMore = !this.showMore
    },
    clickAnswer() {
      if (this.questionInfo && (this.questionInfo.type == 1 || this.questionInfo.type == 4 )) {
        this.answerList = [false, false, false, false, false, false, false, false, false, false];
        this.optionClass = ['noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose', 'noChoose'];
        // for (let index in this.optionsList) {
        //   this.$set(this.answerList, index, true);
        //   this.$set(this.optionClass, index, 'choose');
        // }
        for (let item in this.optionsList) {
          if (this.optionsList[item].type == String(this.userAnswer.answer)) {
            this.$set(this.answerList, item, true);
            this.$set(this.optionClass, item, 'choose');
          }
        }
        if (this.questionInfo && this.questionInfo.type == 4) {
          let answersDate = this.questionInfo.answers || []
          if (this.questionInfo.answer == 1) {
            answersDate.push('A')
            this.questionInfo.answer = 'A'
          } else {
            answersDate.push('B')
            this.questionInfo.answer = 'B'
          }
          this.questionInfo.answers = answersDate
          console.log(this.questionInfo.answers)
          // let answersDate = this.questionInfo.answer
          // this.questionInfo.answers = answersDate.split('')
        }
      } else if (this.questionInfo && this.questionInfo.type == 2) {
        let textAnswer = String(this.userAnswer.answer)
        let chart = textAnswer.split('')
        for (let item in this.optionsList) {
          for (let chartIndex in chart) {
            if (this.optionsList[item].type == chart[chartIndex]) {
              this.$set(this.answerList, item, true);
              this.$set(this.optionClass, item, 'choose');
            }
          }
        }
      }
      if (this.questionInfo && this.questionInfo.type == 5) {
        let fbRightAnswer = JSON.parse(JSON.stringify(this.questionInfo.answer));
        let hasRightAnswer = false;
        for (let i = 0; i < this.fbAnswer.length; i++) {
          if (this.questionInfo.enableDisorderMatch == 1) {//是否是乱序模式
              for (let j = 0; j < fbRightAnswer.length; j++) {
                  let answerTextArr = []
                  if (fbRightAnswer[j].value.indexOf(";") > -1) {
                    answerTextArr = fbRightAnswer[j].value.split(";")
                  } else {
                    answerTextArr.push(fbRightAnswer[j].value)
                  }
                  for (let k = 0; k < answerTextArr.length; k++) {
                      if (this.userAnswer.answer[i].value.trim() == answerTextArr[k].trim()) {
                        hasRightAnswer = true;
                        fbRightAnswer.splice(j, 1);
                        break;
                      }
                    }
              }
            } else {
                  let answerTextArr = []
                  if (fbRightAnswer[i].value.indexOf(";") > -1) {
                    answerTextArr = fbRightAnswer[i].value.split(";")
                  } else {
                    answerTextArr.push(fbRightAnswer[i].value)
                  }
                  for (let k = 0; k < answerTextArr.length; k++) {
                    console.log(this.userAnswer.answer[i], 78787, answerTextArr[k].trim(), 'xuan')
                    if (this.userAnswer.answer[i].value.trim() == answerTextArr[k].trim()) {
                      hasRightAnswer = true;
                      break;
                    }
                  }
            }
          if (hasRightAnswer) {
            this.$set(this.fbAnswerStyle, i, 'right');
          } else {
            this.$set(this.fbAnswerStyle, i, 'wrong');
          }
          hasRightAnswer = false;
        }
      }
    },
  },
};
</script>

<style scoped>
.imgInlineb  /deep/ img{display: inline-block;vertical-align: middle;}
.problemdDom /deep/ img{
  display: inline-block;
  vertical-align: middle;
}
.problemdDom /deep/ p{
  text-align: left!important;
}
.problemdDom /deep/ p img{
  display: block;
}
.problemdDom /deep/ .wscnph{
  display: block;
}
.submit-bg {
  color: #fff;
  font-size: .55rem;
  border-radius: .8rem;
  text-align: center;
  height: 1.2rem;
  line-height: 1.2rem;
  padding: 0 1rem;
  /* background-image: linear-gradient(90deg, #FE9901 0%, #FEB74C 100%); */
}
.input-reset {
  border: 1px solid #e5e5e5!important;
}
.modal {
  z-index: 40003!important;
}
.modal-textarea {
  padding: 0.4rem 0 0 0rem;
  width: 100%;
  height: 4.9rem;
  display: flex;
  flex-direction: column;
}

.modal-textarea textarea {
  font-size: 0.6rem;
  outline: none;
  border: none;
  width: 100%;
  height: 100%;
  background: none;
  -webkit-appearance: none;
  resize: none;
}

.modal-textarea textarea:focus {
  outline: none;
}
.del-img {
  position: absolute;
  top: 0rem;
  right: 0rem;
  /* cursor: pointer;
  background: rgba(0, 0, 0, 0.3); */
}
.del-icon  {
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: #FF4040;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.del-icon .iconfont{
  transform: scale(0.3);
  font-size: .8rem;
  display: block;
  font-weight: bold;
}

.box-bl-r8 {
  border-bottom-left-radius: 0.2rem;
  border-bottom-right-radius: 0.2rem;
}
.vux-popup-dialog {
  background-color: #fff;
  border-radius: 10px 10px 0 0;
}
.box {
  box-sizing: border-box;
  position: relative;
}
.wifi-symbol {
  width: 1rem;
  height: 1rem;
  overflow: hidden;
  position: relative;
  transform: rotate(135deg);
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transform: translate3d(135deg,0,0);
  -webkit-backface-visibility: hidden;
}
.wifi-circle {
  /* border: 0.1rem solid #999999; */
  border-radius: 50%;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  position: absolute;
  -webkit-transform: translate3d(0,0,0);
}

.first {
  width: 0.1rem;
  height: 0.1rem;
  background: #cccccc;
  top: 0.9rem;
  left: 0.9rem;
}
.second {
  width: 0.5rem;
  height: 0.5rem;
  top: 0.7rem;
  left: 0.7rem;
}
.seconAnimation{
  animation: fadeInOut 1s infinite 0.2s;
}
.third {
  width: 0.8rem;
  height: 0.8rem;
  top: 0.5rem;
  left: 0.5rem;
}
.thirdAnimation{
  animation: fadeInOut 1s infinite 0.4s;
}
@keyframes fadeInOut {
    0% {
        opacity: 0; /*初始状态 透明度为0*/
    }
    100% {
        opacity: 1; /*结尾状态 透明度为1*/
    }
}
.isRight{
  color: #71DB77;
}
.isRightBg{
  background: rgba(113,219,119,0.1);
}
.isWrong{
  color: #FB806D;
}
.isWrongBg{
  background: rgba(251,128,109,0.1);
}
.maxMask {
  mask-image: linear-gradient(
    to top,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.7) 10%,
    rgba(255, 255, 255, 1) 15%,
    rgba(255, 255, 255, 1) 100%
  );
}
</style>
